<template>
	<view class="content">
		<!-- #ifdef MP -->
			<view class="fixed-top flex align-center px-1 bg-white py-1">
				<view class="search-box flex align-center justify-center text-muted">
					<text class="iconfont iconsousuokuang"></text>
					<text>精彩热搜：邓紫棋演绎风波</text>
				</view>
				<view class="class-btn flex align-center justify-center text-muted" hover-class="text-main">分类</view>
			</view>
			<view style="height: 84rpx;"></view>
		<!-- #endif -->
		<!-- 轮播图 -->
		<view class="px-3 py-2">
			<view class="position-relative">
				<swiper class="banner-swiper " :current="current" circular :autoplay="true" :interval="3000" :duration="1000" @change="onSwiperChange">
					<swiper-item class="rounded-lg" v-for="(item,index) in bannerList" :key="index">
						<image class="banner-img rounded-lg" :src="item.url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="banner-footer bg-danger flex align-center justify-end py-2 px-3">
					<view class="swiper-title text-white">{{bannerList[current].title}}</view>
					<view class="swiper-dot flex-shrink flex align-center">
						<view class="swiper-dot-item mx-1 " :class="current === dI ? 'bg-white':'bg-light'" v-for="(d,dI) in bannerList" :key="dI"></view>
					</view>
				</view>
			</view>
		</view>
		<panel-card title="为你推荐">
			<view class="panel-list flex flex-wrap">
				<block v-for="item in 10" :key="item">
					<entertainment-card></entertainment-card>
				</block>
			</view>
		</panel-card>
		<divider></divider>
		<panel-card title="为你推荐">
			<view class="panel-list flex flex-wrap">
				<block v-for="i in 10" :key="i">
					<movie-card></movie-card>
				</block>
			</view>
		</panel-card>
		<divider></divider>
		<panel-card title="为你推荐">
			<view class="panel-list flex flex-wrap">
				<variety-card></variety-card>
			</view>
		</panel-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				bannerList:[
					{
						title:'中国人唱给美国的模型Rap',
						url:'/static/demo/swiper/1.jpg'
					},
					{
						title:'伊朗:挫败以方针对伊外长的暗杀行动',
						url:'/static/demo/swiper/2.jpg'
					},
					{
						title:'中国这些举措在世贸组织获赞',
						url:'/static/demo/swiper/3.jpg'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			onSwiperChange(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		flex: 1;
		width: 100%;
		height:64rpx;
		border-radius: 50rpx;
		color: #959fa0;
		background-color: #f6f7f8;
	}
	.class-btn {
		width: 78rpx;
		height: 64rpx;
	}
	.banner-swiper {
		width: 100%;
		height: 248rpx;
		.banner-img {
			width: 100%;
			height: 248rpx;
		}
	}
	.banner-footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.05);
		.swiper-title {
			width: 80%;
		}
		.swiper-dot {
			width: 20%;
		}
		.swiper-dot-item {
			width: 16rpx;
			height: 16rpx;
			border-radius: 16rpx;
		}
	}
	.panel-list {
		padding: 0 15rpx;
	}
	
	
	
</style>
